<template>
  <div>
    <el-form-item
      v-if="activeData.ocrType !== undefined"
      label="识别内容"
    >
      <el-select v-model="activeData.ocrType" placeholder="请选择">
        <el-option
          label="通用文字"
          value="GENERAL"
        />
      </el-select>
      <el-button class="mt5" icon="el-icon-edit" @click="handleOcrRule">
        设置识别规则
      </el-button>
    </el-form-item>
    <el-dialog
      :visible.sync="dialogVisible"
      title="识别规则设置"
      width="30%"
    >
      <span class="text-danger">识别内容和问卷字段对应的关系如下存储, 识别完成之后将按照规则将数据填充到问卷字段内</span>
      <div>
        <el-button type="text" icon="el-icon-edit" @click="handleCreateFields">
          创建默认存储字段
        </el-button>
      </div>
      <div v-if="activeData.fieldMapping&&Object.keys(activeData.fieldMapping).length">
        <div v-for="key in Object.keys(getOcrFields(activeData.ocrType))" :key="key">
          <div class="m5">
            <el-tag>{{ getOcrFields(activeData.ocrType)[key]['label'] }}</el-tag>
            存储到
            <el-tag v-if="Object.keys(activeData.fieldMapping)">
              {{ getFormField(key) }}
            </el-tag>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import {queryProjectItemList} from "../../../api"

export default {
  name: 'ConfigItemOcr',
  components: {},
  props: ['activeData', 'formConf'],
  data() {
    return {
      dialogVisible: false,
      // 问卷所有字段
      fieldList: [],
      // ocr默认存储字段关系
      ocrFields: {
        "GENERAL": {
          url: {
            type: 'IMAGE_UPLOAD',
            label: '识别文件'
          },
          ocrContent: {
            type: 'INPUT',
            label: '识别内容'
          }
        }
      }
    }
  },
  created() {
    this.getAllFormFields()
  },
  methods: {
    // 创建ocr识别存储的字段
    handleCreateFields() {
      this.dialogVisible = false
      this.$emit('add-fields', this.ocrFields[this.activeData.ocrType])
    },
    handleOcrRule() {
      this.dialogVisible = true
      this.getAllFormFields()
    },
    getOcrFields(key) {
      return this.ocrFields[key]
    },
    // 获取全部问卷字段
    getAllFormFields() {
      queryProjectItemList({key: this.formConf.formKey})
        .then(res => {
          this.fieldList = res.data
        })
    },
    getFormField(key) {
      let fieldKey = ''
      if (this.activeData && this.activeData.fieldMapping && this.activeData.fieldMapping[key]) {
        fieldKey = this.activeData.fieldMapping[key]
      }
      let field = this.fieldList.find(item => item.formItemId == fieldKey)
      return field ? field.label : ''
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
